<template>
  <div id="main3" class="pie-wrap"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      this.drawChart();
    });
  },
  methods: {
    drawChart() {
      this.myChart = echarts.init(document.getElementById("main3"));
      this.myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          data: [
            "信息传输、软件和信息技术服务业",
            "公共管理、社会保障和社会组织",
            "金融业",
            "军队",
            "房地产业",
            "教育",
            "科学研究和技术服务业",
          ],
        },
        series: [
          {
            name: "毕业去向",
            type: "pie",
            selectedMode: "single",
            radius: [0, "30%"],
            label: {
              position: "inner",
              fontSize: 14,
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1548, name: "升学" },
              { value: 775, name: "就业" },
              { value: 679, name: "未就业", selected: true },
            ],
          },
          {
            name: "毕业去向",
            type: "pie",
            radius: ["45%", "60%"],
            labelLine: {
              length: 30,
            },
            label: {
              formatter: "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
              backgroundColor: "#F6F8FC",
              borderColor: "#8C8D8E",
              borderWidth: 1,
              borderRadius: 4,

              rich: {
                a: {
                  color: "#6E7079",
                  lineHeight: 22,
                  align: "center",
                },
                hr: {
                  borderColor: "#8C8D8E",
                  width: "100%",
                  borderWidth: 1,
                  height: 0,
                },
                b: {
                  color: "#4C5058",
                  fontSize: 14,
                  fontWeight: "bold",
                  lineHeight: 33,
                },
                per: {
                  color: "#fff",
                  backgroundColor: "#4C5058",
                  padding: [3, 4],
                  borderRadius: 4,
                },
              },
            },
            data: [
              { value: 1048, name: "国内" },
              { value: 335, name: "出国（出境）" },
              { value: 310, name: "协议和合同就业" },
              { value: 251, name: "灵活就业" },
              { value: 234, name: "拟继续深造" },
              { value: 147, name: "待就业" },
            ],
          },
        ],
      });
    },
  },
  //                    data: ['信息传输、软件和信息技术服务业', '公共管理、社会保障和社会组织', '金融业', '军队', '房地产业', '教育', '科学研究和技术服务业']
};
</script>

<style scope>
.pie-wrap {
  width: 100%;
  height: 650px;
}
</style>
